import { computed } from "vue";
import { useEdit } from "./useEdit";
import { useSubmitHook, checkAndHandleResult } from "./useSubmitHook";
import { EleMessage } from "ele-admin-plus/es";

// 在文件顶部添加类型声明
/**
 * 使用表单编辑功能的钩子
 * @param {Object} props - 组件属性
 * @param {Function} emit - 事件触发函数
 * @param {Object} options - 配置选项
 * @param {Object} options.actionConfigs - 操作配置，包含不同操作（如添加、更新）的配置
 * @param {Object} options.actionConfigs.add - 添加操作的配置   起什么名字都行，和list里面的名字一致就行，这里是add，list里面是add，所以这里可以是add，也可以是addAction
 * @param {Object} options.actionConfigs.add.title - 表单标题
 * @param {String} options.actionConfigs.add.button - 表单按钮文本
 * @param {Function} options.actionConfigs.add.api - 添加操作的API函数
 * @param {Array} options.actionConfigs.add.showFields - 显示的表单字段
 * @param {Array} options.actionConfigs.add.disabledFields - 禁用的表单字段
 * @param {Object} options.actionConfigs.add.rules - 表单字段的验证规则
 * @param {Object} options.formFields - 表单字段的初始值
 * @param {Function} options.detailApi - 获取详情的API函数
 * @param {String} [options.idField="id"] - 数据项的唯一标识字段
 * @returns {Object} - 返回表单、表单引用、加载状态及相关操作方法
 */
export function useFormEdit(props, emit, options) {
  const { actionConfigs, formFields, detailApi, idField = "id" } = options;

  const { handleBeforeSubmit, handleAfterSubmit, handleSubmitError } =
    useSubmitHook();

  // 在内部处理API配置

  // 处理API配置时添加检查
  const actionApis = actionConfigs
    ? Object.keys(actionConfigs).reduce((apis, action) => {
        if (actionConfigs[action]?.api) {
          apis[action] = { api: actionConfigs[action].api };
        }
        return apis;
      }, {})
    : {};

  const {
    form,
    resetFields,
    assignFields,
    formRef,
    loading,
    open,
    resetForm,
    validateForm,
    getFormData,
    handleSubmit: editHandleSubmit,
    clearValidateForm,
    reloadForm,
  } = useEdit({
    formFields,
    apis: actionApis, // 使用生成的apis配置
    detailApi,
    idField,
  });

  const visible = computed({
    get: () => props.modelValue,
    set: (val) => emit("update:modelValue", val),
  });

  const handleOpen = () => {
    try {
      // 确保formData被正确初始化
      let formData = props.data || {};

      console.log(formData);
      // 执行beforeOpen钩子
      if (actionConfigs[props.action]?.beforeOpen) {
        const modifiedData = actionConfigs[props.action].beforeOpen({
          type: props.action,
          formData: formData,
        });
        console.log(modifiedData, "modifiedData");
        // 如果beforeOpen返回了修改后的数据，则使用修改后的数据
        if (modifiedData) {
          formData = modifiedData.formData;
        }
      }

      // 打开弹框并加载数据
      return open(formData).then(() => {
        console.log(form, formData);
        // assignFields({ ...form, ...formData });

        emit("open");

        // 执行afterOpen钩子
        if (actionConfigs[props.action]?.afterOpen) {
          const result = actionConfigs[props.action].afterOpen(form, formData);
          return Promise.resolve(result);
        }
      });
    } catch (error) {
      return Promise.reject(error);
    }
  };

  const handleSubmit = async () => {
    try {
      // 先进行表单验证
      await validateForm().catch((error) => {
        // 验证错误直接抛出，由Element UI处理显示
        throw error;
      });

      // 处理beforeSubmit钩子
      const modifiedData = await checkAndHandleResult(
        actionConfigs[props.action]?.beforeSubmit?.({
          type: props.action,
          formData: form,
        }),
      ).catch((error) => {
        // 处理beforeSubmit钩子错误
        handleSubmitError(actionConfigs[props.action], error);
        throw error;
      });

      // 提交表单
      const res = await editHandleSubmit(
        props.action,
        modifiedData?.formData || form,
      )
        .then(() => {
          handleCancel();
        })
        .catch((error) => {
          // 处理提交错误
          handleSubmitError(actionConfigs[props.action], error);
          throw error;
        });

      // 处理afterSubmit钩子
      await handleAfterSubmit(actionConfigs[props.action], {
        type: props.action,
        result: res,
      });

      if (!actionConfigs[props.action].skipReload) {
        emit("done");
      }
      return res;
    } catch (error) {
      // 统一处理所有错误
      // console.error("表单提交错误:", error);

      // 如果是验证错误，Element UI会自动显示，不需要额外处理
      if (
        !(
          error &&
          typeof error === "object" &&
          Object.values(error).some((val) => Array.isArray(val))
        )
      ) {
        // 非验证错误显示提示
        EleMessage.error(error?.message || "提交失败");
      }
      return;
    }
  };

  /** 关闭弹窗 */
  const handleCancel = () => {
    visible.value = false;
    console.log(visible.value, "触发关闭visible.value");
    resetFields();
    clearValidateForm();
  };
  return {
    resetFields,
    assignFields,
    // 表单数据对象，包含所有表单字段
    form,
    // 表单引用，用于调用表单方法如validate等
    formRef,
    // 控制弹框显示/隐藏的响应式变量
    visible,
    // 加载状态，true表示正在提交或加载中
    loading,
    // 打开弹框并初始化表单的方法
    // @returns {Promise} 异步操作结果
    handleOpen,
    // 重置表单到初始状态的方法
    resetForm,
    // 提交表单的方法
    // @returns {Promise} 包含提交结果的Promise
    handleSubmit,
    // 当前操作(action)需要显示的字段列表
    showFields: computed(() => actionConfigs[props.action].showFields),
    // 当前操作(action)需要禁用的字段列表
    disabledFields: computed(() => actionConfigs[props.action].disabledFields),
    // 当前操作(action)的表单验证规则
    currentRules: computed(() => actionConfigs[props.action].rules),
    // 表单验证方法
    // @returns {Promise} 验证结果的Promise
    validateForm,
    // 获取当前表单数据的方法
    // @returns {Object} 当前表单数据
    getFormData,

    handleCancel,

    reloadForm,
  };
}
